// Login.tsx - 登录页面组件
// 这个文件实现了登录、注册和忘记密码功能，使用Ant Design表单和React状态管理

// 导入React和useState Hook：useState用于在函数组件中添加状态管理
import React, { useState } from 'react';
// 导入Ant Design组件：Form用于表单，Input用于输入框，Button用于按钮，Card用于卡片容器，message用于提示消息，Tabs用于选项卡
import { Form, Input, Button, Card, message, Tabs } from 'antd';
// 导入Ant Design图标：UserOutlined用户图标，LockOutlined锁图标，MailOutlined邮件图标
import { UserOutlined, LockOutlined, MailOutlined } from '@ant-design/icons';
// 导入useNavigate Hook：用于编程式导航，跳转到其他页面
import { useNavigate } from 'react-router-dom';
// 导入用户状态存储：使用Zustand store管理用户登录状态
import { useUserStore } from '@/store';
// 导入useTranslation Hook：用于国际化翻译
import { useTranslation } from 'react-i18next';
// 导入配置好的axios实例：用于发送API请求
import api from '@/api';

// 定义登录表单接口（TypeScript类型定义）
// 接口描述了登录表单的数据结构，确保类型安全
interface LoginForm {
  username: string; // 用户名：字符串类型
  password: string; // 密码：字符串类型
}

// 定义注册表单接口
interface RegisterForm {
  username: string; // 用户名
  password: string; // 密码
  confirmPassword: string; // 确认密码
  email: string; // 邮箱
}

// 定义忘记密码表单接口
interface ForgotPasswordForm {
  email: string; // 邮箱
}

// 定义API响应接口：通用API响应格式
interface ApiResponse<T = unknown> {
  code: number; // 状态码：200表示成功，其他表示失败
  message: string; // 消息：服务器返回的消息
  data?: T; // 数据：可选泛型，表示响应数据
}

// 登录响应数据接口：API拦截器处理后的登录响应数据结构
interface LoginResponseData {
  token: string; // JWT令牌：用于身份认证
  userInfo: { // 用户信息对象
    id: number; // 用户ID
    username: string; // 用户名
    avatar: string; // 头像URL
    permissions: string[]; // 权限数组
  };
}

// 注册响应数据接口：API拦截器处理后的注册响应数据结构
interface RegisterResponseData {
  token: string; // JWT令牌
  userInfo: { // 用户信息对象
    id: number; // 用户ID
    username: string; // 用户名
    avatar: string; // 头像URL
    permissions: string[]; // 权限数组
  };
}

// 定义Login组件：使用React.FC（函数组件）类型
const Login: React.FC = () => {
  // 使用useState Hook定义加载状态
  // loading: 布尔值，表示是否正在加载（提交表单时显示加载状态）
  // setLoading: 用于更新loading状态的函数
  const [loading, setLoading] = useState(false);
  
  // 使用useState Hook定义激活的选项卡状态
  // activeTab: 字符串，表示当前激活的选项卡key（'login'、'register'、'forgot'）
  // setActiveTab: 用于更新activeTab状态的函数
  const [activeTab, setActiveTab] = useState('login');
  
  // 使用useNavigate Hook获取导航函数：用于页面跳转
  const navigate = useNavigate();
  
  // 使用Zustand store获取用户操作方法
  // 使用解构赋值获取login、updateUserInfo、updatePermissions函数
  const { login, updateUserInfo, updatePermissions } = useUserStore();
  
  // 使用useTranslation Hook获取翻译函数：用于国际化
  const { t } = useTranslation();

  // 处理登录表单提交
  // values参数：LoginForm类型，包含用户名和密码
  const handleLogin = async (values: LoginForm) => {
    setLoading(true); // 开始加载，设置loading状态为true
    try {
      // 发送登录API请求：使用api.post方法发送POST请求到/api/login
      // await关键字等待异步操作完成，确保代码按顺序执行
      // 类型断言：将响应数据转换为LoginResponseData类型
      const responseData = await api.post('/api/login', values) as LoginResponseData;
      
      // 检查响应数据是否存在且包含token
      if (responseData && responseData.token) {
        const { token, userInfo } = responseData;
        
        // 更新用户状态：调用Zustand store中的方法
        login(token); // 设置token和登录状态
        updateUserInfo(userInfo.username, userInfo.avatar); // 更新用户信息
        updatePermissions(userInfo.permissions); // 更新权限
        
        // 显示成功消息：使用Ant Design的message组件
        message.success(t('auth.login.success'));
        
        // 导航到首页：使用navigate函数跳转到根路径
        navigate('/');
      } else {
        // 登录失败，显示错误消息
        message.error(t('auth.login.failed'));
      }
    } catch (error: unknown) {
      // 错误处理：捕获并处理登录过程中可能出现的错误
      console.error('Login error:', error); // 在控制台输出错误信息
      
      // 提取错误消息：从错误对象中获取服务器返回的错误消息
      const errorMessage = (error as { response?: { data?: { message?: string } } })?.response?.data?.message;
      
      // 显示错误消息：使用服务器返回的消息或默认消息
      message.error(errorMessage || t('auth.login.failed'));
    } finally {
      // 无论成功或失败，最终都设置loading状态为false
      setLoading(false);
    }
  };

  // 处理注册表单提交
  const handleRegister = async (values: RegisterForm) => {
    // 验证密码和确认密码是否匹配
    if (values.password !== values.confirmPassword) {
      message.error(t('auth.errors.passwords_not_match'));
      return; // 如果不匹配，直接返回，不执行注册
    }

    setLoading(true); // 开始加载
    try {
      // 发送注册API请求
      const response = (await api.post('/api/register', {
        username: values.username,
        password: values.password,
        email: values.email
      })) as ApiResponse<RegisterResponseData>;
      
      // 检查响应状态码是否为200（成功）
      if (response.code === 200) {
        const { token, userInfo } = response.data!; // 非空断言，确保data存在
        // 更新用户状态
        login(token);
        updateUserInfo(userInfo.username, userInfo.avatar);
        updatePermissions(userInfo.permissions);
        
        message.success(t('auth.register.success'));
        navigate('/'); // 注册成功后跳转到首页
      } else {
        // 注册失败，显示服务器返回的错误消息
        message.error(response.message);
      }
    } catch (error: unknown) {
      console.error('Register error:', error);
      const errorMessage = (error as { response?: { data?: { message?: string } } })?.response?.data?.message;
      message.error(errorMessage || t('auth.register.failed'));
    } finally {
      setLoading(false);
    }
  };

  // 处理忘记密码表单提交
  const handleForgotPassword = async (values: ForgotPasswordForm) => {
    setLoading(true);
    try {
      // 发送忘记密码API请求
      const response = (await api.post('/api/forgot-password', values)) as ApiResponse;
      
      if (response.code === 200) {
        // 请求成功，显示成功消息并切换到登录选项卡
        message.success(response.message);
        setActiveTab('login');
      } else {
        // 请求失败，显示错误消息
        message.error(response.message);
      }
    } catch (error: unknown) {
      console.error('Forgot password error:', error);
      const errorMessage = (error as { response?: { data?: { message?: string } } })?.response?.data?.message;
      message.error(errorMessage || t('auth.forgot_password.failed'));
    } finally {
      setLoading(false);
    }
  };

  // 返回组件的JSX结构
  return (
    // 外层容器：使用Tailwind CSS设置背景渐变和布局
    <div className="flex items-center justify-center bg-gradient-to-br from-blue-50 via-white to-indigo-100 ">
      <div className="min-h-screen flex items-center justify-center px-4 sm:px-6 lg:px-8">
      <div className="max-w-md w-full mx-auto">
          {/* 标题区域 */}
          <div className="flex flex-col items-center mb-6">
            {/* 用户图标容器 */}
            <div className="w-14 h-14 bg-white rounded-full shadow-md flex items-center justify-center ring-1 ring-blue-100 mb-3">
              <UserOutlined className="text-lg text-blue-600" />
            </div>
            {/* 标题 */}
            <h2 className="text-xl font-semibold text-gray-800 mb-1">
              {t('auth.login.title')}
            </h2>
            {/* 副标题 */}
            <p className="text-gray-500 text-xs">
              {t('auth.login.subtitle')}
            </p>
          </div>

          {/* 卡片容器：包含表单内容 */}
          <Card
            className="w-full shadow-2xl border-0 rounded-2xl backdrop-blur-sm bg-white/95"
            styles={{
              body: { padding: '40px' },
              header: { border: 'none', padding: '0' }
            }}
          >
            {/* 选项卡组件：切换登录、注册、忘记密码表单 */}
            <Tabs
              activeKey={activeTab} // 当前激活的选项卡key
              onChange={setActiveTab} // 选项卡切换时的回调函数
              centered // 居中显示选项卡
              tabBarStyle={{ // 选项卡栏样式
                marginBottom: '28px',
                fontWeight: '600'
              }}
              items={[ // 选项卡项配置
                {
                  key: 'login', // 选项卡key
                  label: t('auth.login.title'), // 选项卡标签（翻译后的文本）
                  children: ( // 选项卡内容
                    // 登录表单
                    <Form
                      name="login" // 表单名称
                      onFinish={handleLogin} // 表单提交时的回调函数
                      autoComplete="off" // 禁用自动完成
                      layout="vertical" // 垂直布局
                    >
                      {/* 用户名表单项 */}
                      <Form.Item
                        name="username" // 字段名
                        label={t('auth.login.username')} // 标签文本（翻译）
                        rules={[ // 验证规则
                          { required: true, message: t('auth.errors.username_required') } // 必填验证
                        ]}
                      >
                        {/* 输入框：前缀为用户图标 */}
                        <Input
                          prefix={<UserOutlined />}
                          placeholder={t('auth.login.username')}
                          size="large" // 大尺寸
                        />
                      </Form.Item>

                      {/* 密码表单项 */}
                      <Form.Item
                        name="password"
                        label={t('auth.login.password')}
                        rules={[
                          { required: true, message: t('auth.errors.password_required') }
                        ]}
                      >
                        {/* 密码输入框：显示隐藏密码功能 */}
                        <Input.Password
                          prefix={<LockOutlined />}
                          placeholder={t('auth.login.password')}
                          size="large"
                        />
                      </Form.Item>

                      {/* 提交按钮 */}
                      <Form.Item>
                        <Button
                          type="primary" // 主按钮类型
                          htmlType="submit" // 按钮类型为提交
                          loading={loading} // 加载状态
                          size="large" // 大尺寸
                          block // 块级按钮（宽度100%）
                          className="h-12 text-base font-semibold rounded-lg bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 border-0 shadow-md hover:shadow-lg transition-all duration-200"
                        >
                          {t('auth.login.submit')} {/* 按钮文本（翻译） */}
                        </Button>
                      </Form.Item>

                      {/* 忘记密码链接 */}
                      <div className="text-center pt-4">
                        <Button
                          type="link" // 链接类型按钮
                          onClick={() => setActiveTab('forgot')} // 点击切换到忘记密码选项卡
                          className="text-blue-600 hover:text-blue-800 font-medium"
                        >
                          {t('auth.login.forgot_password')}
                        </Button>
                      </div>
                    </Form>
                  )
                },
                {
                  key: 'register',
                  label: t('auth.register.title'),
                  children: (
                    // 注册表单
                    <Form
                      name="register"
                      onFinish={handleRegister}
                      autoComplete="off"
                      layout="vertical"
                    >
                      {/* 用户名表单项 */}
                      <Form.Item
                        name="username"
                        label={t('auth.register.username')}
                        rules={[
                          { required: true, message: t('auth.errors.username_required') },
                          { min: 3, message: t('auth.errors.username_min_length') } // 最小长度验证
                        ]}
                      >
                        <Input
                          prefix={<UserOutlined />}
                          placeholder={t('auth.register.username')}
                          size="large"
                        />
                      </Form.Item>

                      {/* 邮箱表单项 */}
                      <Form.Item
                        name="email"
                        label={t('auth.register.email')}
                        rules={[
                          { required: true, message: t('auth.errors.email_required') },
                          { type: 'email', message: t('auth.errors.email_invalid') } // 邮箱格式验证
                        ]}
                      >
                        <Input
                          prefix={<MailOutlined />}
                          placeholder={t('auth.register.email')}
                          size="large"
                        />
                      </Form.Item>

                      {/* 密码表单项 */}
                      <Form.Item
                        name="password"
                        label={t('auth.register.password')}
                        rules={[
                          { required: true, message: t('auth.errors.password_required') },
                          { min: 6, message: t('auth.errors.password_min_length') } // 最小长度验证
                        ]}
                      >
                        <Input.Password
                          prefix={<LockOutlined />}
                          placeholder={t('auth.register.password')}
                          size="large"
                        />
                      </Form.Item>

                      {/* 确认密码表单项 */}
                      <Form.Item
                        name="confirmPassword"
                        label={t('auth.register.confirm_password')}
                        dependencies={['password']} // 依赖字段，用于验证密码一致性
                        rules={[
                          { required: true, message: t('auth.errors.confirm_password_required') },
                          // 自定义验证规则：检查密码和确认密码是否一致
                          ({ getFieldValue }) => ({
                            validator(_, value) {
                              if (!value || getFieldValue('password') === value) {
                                return Promise.resolve(); // 验证通过
                              }
                              return Promise.reject(new Error(t('auth.errors.passwords_not_match'))); // 验证失败
                            },
                          }),
                        ]}
                      >
                        <Input.Password
                          prefix={<LockOutlined />}
                          placeholder={t('auth.register.confirm_password')}
                          size="large"
                        />
                      </Form.Item>

                      {/* 注册按钮 */}
                      <Form.Item>
                        <Button
                          type="primary"
                          htmlType="submit"
                          loading={loading}
                          size="large"
                          block
                          className="h-12 text-base font-semibold rounded-lg bg-gradient-to-r from-green-600 to-teal-600 hover:from-green-700 hover:to-teal-700 border-0 shadow-md hover:shadow-lg transition-all duration-200"
                        >
                          {t('auth.register.submit')}
                        </Button>
                      </Form.Item>
                    </Form>
                  )
                },
                {
                  key: 'forgot',
                  label: t('auth.forgot_password.title'),
                  children: (
                    // 忘记密码表单
                    <Form
                      name="forgotPassword"
                      onFinish={handleForgotPassword}
                      autoComplete="off"
                      layout="vertical"
                    >
                      {/* 邮箱表单项 */}
                      <Form.Item
                        name="email"
                        label={t('auth.forgot_password.email')}
                        rules={[
                          { required: true, message: t('auth.errors.email_required') },
                          { type: 'email', message: t('auth.errors.email_invalid') }
                        ]}
                      >
                        <Input
                          prefix={<MailOutlined />}
                          placeholder={t('auth.forgot_password.email')}
                          size="large"
                        />
                      </Form.Item>

                      {/* 提交按钮 */}
                      <Form.Item>
                        <Button
                          type="primary"
                          htmlType="submit"
                          loading={loading}
                          size="large"
                          block
                          className="h-12 text-base font-semibold rounded-lg bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 border-0 shadow-md hover:shadow-lg transition-all duration-200"
                        >
                          {t('auth.forgot_password.submit')}
                        </Button>
                      </Form.Item>

                      {/* 返回登录链接 */}
                      <div className="text-center pt-4">
                        <Button
                          type="link"
                          onClick={() => setActiveTab('login')} // 点击切换回登录选项卡
                          className="text-blue-600 hover:text-blue-800 font-medium"
                        >
                          {t('auth.forgot_password.back_to_login')}
                        </Button>
                      </div>
                    </Form>
                  )
                }
              ]}
            />
          </Card>
        </div>
    </div>
    </div>
  );
};

// 导出Login组件作为默认导出
export default Login;